<template>
  <view>
    <view class=" padding box relative">
      <view class="tag">
        {{ statusMap(info.status) }}
      </view>
      <view class="card">
        <view class=" border-bottom padding-bottom-sm mbp">
          <span>设备</span>:{{ info.mdDevice?.code }}
        </view>
        <view class="border-bottom padding-bottom-sm mbp">
          <span>设备类型</span>:{{ info.mdDevice?.mdDeviceTypeId }}
        </view>
        <view class="border-bottom padding-bottom-sm mbp">
          <span>设备系统code</span>:{{ info.mdDevice?.sysOrgCode }}
        </view>
        <view class="mbp">
          <span>设备过保时间</span>:{{ info.mdDevice?.expDate }}
        </view>
      </view>

      <view class="card">
        <view class=" border-bottom padding-bottom-sm mbp">
          <span>店铺名称</span>:{{ info.cuStore?.name }}
        </view>
        <view class="border-bottom padding-bottom-sm mbp">
          <span>店铺联系人</span>:{{ info.cuStore?.linkor }}
        </view>
        <view class="border-bottom padding-bottom-sm mbp">
          <span>店铺联系方式</span>:{{ info.cuStore?.linkPhone }}
        </view>
        <view class="mbp">
          <span>店铺地址</span>:{{ info.cuStore?.address }}
        </view>
      </view>

      <view class="card">
        <view class=" border-bottom padding-bottom-sm mbp">
          <span>创建时间</span>:{{ info.createTime }}
        </view>
        <view class="border-bottom padding-bottom-sm mbp">
          <span>备注</span>:{{ info.descript }}
        </view>
        <span>维修图片</span>
        <image v-for="item in info.photos.split(',')" :key="item" :src="item" mode="aspectFit" class="image">
        </image>
      </view>
    </view>
    <wd-message-box/>
    <view class="footer">
      <wd-button type="primary" size="large" @click="handleChancel" v-if="info.status==2" block>取消报修</wd-button>
    </view>
  </view>
</template>

<script setup>
import {onLoad, onShow} from '@dcloudio/uni-app'
import {useMessage} from '@/uni_modules/wot-design-uni'
import deviceRepairApiService from "@/api/maintenance.js"
import {ref} from 'vue';
import userApiService from "../../api/user";

const message = useMessage()
const id = ref("")
const info = ref({
  mdDeviceId: "",
  descript: "",
  createTime: "",
  photos: "",
  cuStore: {
    "id": "",
    "sysOrgCode": "",
    "code": "",
    "name": "",
    "cuCustomerId": "",
    "cuCustomerName": "",
    "cuProvice": "",
    "cuCity": "",
    "cuArea": "",
    "address": "",
    "linkor": "",
    "linkPhone": "",
    "lbs": null,
    "crmStoreId": "",
    "deviceQty": null
  },
  mdDevice: {
    "id": "",
    "sysOrgCode": "",
    "code": "",
    "mdDeviceTypeId": "",
    "cuStoreId": "",
  }
})

function handleChancel() {
  let that = this
  console.log("test")
  message.confirm({
    msg: '确定取消么',
    title: '取消'
  }).then(() => {
    deviceRepairApiService.chancel({
      id: id.value,
      status: "5"
    }).then(res => {
      console.log(res)
      uni.showToast({
        icon: "none",
        title: "取消成功"
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 500)
    })
  }).catch(() => {
    console.log('点击了取消按钮')
  })
}

const statusMap = (key) => {
  return deviceRepairApiService.statusString(key)
}

const fetchData = () => {
  deviceRepairApiService.detail({
    id: id.value
  }).then(res => {
    info.value = res
  })
}


onLoad(e => {
  id.value = e.id
  fetchData()
})

onShow(() => {

})


</script>


<style lang="scss" scoped>
.relative {
  position: relative;
}

.box {
  border-radius: 12px;
  overflow: hidden;
  padding: 20rpx;
}

.tag {
  position: absolute;
  top: 30rpx;
  right: -40rpx;
  font-size: 28rpx;
  transform: rotate(40deg);
  background-color: rgba(253, 128, 8, 0.8);
  color: #fff;
  width: 240rpx;
  text-align: center;
}

.image {
  width: 100%;
  margin-top: 20rpx;
}

.card {
  background-color: #fff;
  margin-top: 20rpx;
  padding: 20rpx;
  border-radius: 12rpx;
  font-size: 25rpx;

  span {
    font-size: 28rpx;
    font-weight: 500;
    min-width: 320rpx;
  }
}

.border-bottom {
  border-bottom: 1px solid #f1f1f1;
}
</style>
